<!-- 步骤条-->
<template>
  <view class="step-line-one">
    <view class="step-bar">
      <view class="step-bar-dot"></view>
      <view class="step-bar-line" v-if="!lastStep"></view>
    </view>
    <view class="step-content">
      <view class="step-content-title">{{ textTitle }}</view>
      <view class="step-content-content">{{ textContent }}</view>
    </view>
  </view>
</template>
 
<script>
export default {
  name: "stepBar",
  props: {
    textTitle: {
      type: String,
      default: '标题标题'
    },
    textContent: {
      type: String,
      default: '2022-02-22 12:00:00 完成'
    },
    lastStep: {
      type: Boolean,
    }
 
  }
}
</script>
 
<style scoped lang="scss">
 
.step-content {
  margin-left: 24px;
 
  &-title {
    font-weight: 700;
  }
  &-content {
    margin: 10px 0;
    color: #b0b0b0;
  }
}
 
.step-bar {
  position: relative;
}
.step-bar-dot {
  width: 14px;
  height: 15px;
  border-radius: 50%;
  background-color: #1777ff;
  position: absolute;
  left: 0;
  top: 3px;
}
.step-bar-line {
  width: 3px;
  height: 60px;
  background-color: #1777ff;
  position: absolute;
  left: 6px;
  top: 7px;
}
 
</style>